// 盒子布局
.flex {
  display: flex;

  // 行内块
  &-inline {
    display: inline-flex;
  }
}

// 指定元素在主轴上的布局方向（正方向或反方向）
@each $direction in $flex-direction {
  .flex-#{$direction} {
    @extend .flex;
    flex-direction: $direction;
  }
}

// 指定元素在主轴上的排布，是收缩或溢出，还是在交叉轴上延伸
@each $wrap in $flex-wrap {
  .flex-#{$wrap} {
    flex-wrap: $wrap;
  }
}

// 指定元素在主轴方向上的（元素之间及其周围的）空间分配
@each $content, $value in $main-content {
  .main-content-#{$content} {
    justify-content: $value;
  }
}

// 指定元素在交叉轴方向上的（元素之间及其周围的）空间分配，对单行弹性盒子无效
@each $content, $value in $cross-content {
  .cross-content-#{$content} {
    align-content: $value;
  }
}

// 指定元素在交叉轴方向上的对齐方式
@each $item, $value in $cross-items {
  .cross-items-#{$item} {
    align-items: $value;
  }
}
